<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试用例</title>
</head>

<body>
    <h3 id=self-collapse>内部margin塌陷</h3>
    <p>下面的div里包含了4个div：第一个内容为upper，第二个因为浮动不占用高度，第三个无内容，第四个below。
        第三个因为没有内容，且没有padding，border，导致自己的上下边距重叠塌缩为60px。因此below从下方60px处开始排列，
        而不是120px。
    </p>
    <div style="border: 1px solid;">
        <div style="border: 1px solid;">upper</div>
        <div style="float:left;width:60px;height:60px; background-color:green;">float<br>height:<br>60px</div>
        <div style="margin-top:60px;margin-bottom:60px;"></div>
        <div style="border:1px solid;">below</div>
    </div>
    <video src="./video2.mp4"></video>
</body>

</html>